<template>
  <div class="app-container">
    <el-button type="primary" style="float: right" @click="router.go(-1);">返回</el-button>
    <div v-loading="loading">
      <mt-preview
        ref="MtPreviewRef"
        @on-event-call-back="onEventCallBack"
      ></mt-preview>
    </div>
  </div>
</template>
<script setup>
import { emptyIsFalse } from "@/api/123wwwww/universalMethod";
import { getManagementScene } from "@/api/ruoyi-device/managementScene";
import { MtPreview } from "maotu";
import "maotu/dist/style.css";
const MtPreviewRef = ref();
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { onMounted } from "vue";
onMounted(() => {
  if (route.query != null) {
    const response = route.query;
    getManagementScene(response.id).then((response) => {
      handleToView(response.data);
    });
  }
});

function handleToView(item) {
  if (emptyIsFalse(item.dataModel)) {
    MtPreviewRef.value?.setImportJson(JSON.parse(item.dataModel));
  } else {
    // 如果之前没存过数据 那么就传初始化数据 这样可以自己设置画布大小等配置
    MtPreviewRef.value?.setImportJson({
      canvasCfg: {
        width: 1920,
        height: 1080,
        scale: 1,
        color: "",
        img: "",
        guide: true,
        adsorp: true,
        adsorp_diff: 3,
        transform_origin: {
          x: 0,
          y: 0,
        },
        drag_offset: {
          x: 0,
          y: 0,
        },
      },
      gridCfg: {
        enabled: true,
        align: true,
        size: 10,
      },
      json: [],
    });
  }
}
</script>
